<!-- 设置 -->
<template>
    <div style="background:#f8f8f9">

        <Tabs value="name1" style="background:#f8f8f9">
            <TabPane label="系统设置" name="name1">
                <Row :gutter="16" style="margin-bottom:20px">
                    <Col span="12">
                    <Card style="height:360px">
                        <p slot="title">编号方式</p>
                        <br>
                        <br>
                        <RadioGroup v-model="phone">
                            <Radio label="apple">
                                <span>编号规则1</span>
                                <p>根据创建日期自动编号，即年份+月份+日期+三位序号，示例20180713001。</p>
                            </Radio>
                            <br>
                            <br>
                            <Radio label="android">
                                <span>编号规则2</span>
                                <p>根据机构缩写（一级机构账号填写机构基本信息时确定）+年份+四位序号，
                                    示例ZHLX20180001。</p>
                            </Radio>
                            <br>
                            <br>
                            <Radio label="windows">
                                <span>编号规则3</span>
                                <p>项目编号自主填写。</p>
                            </Radio>
                        </RadioGroup>
                    </Card>
                    </Col>
                    <Col span="12">
                    <Card style="height:360px">
                        <p slot="title">
                            <Row>
                                <Col span="12">
                                项目审核级数
                                </Col>
                                <Col span="12" style="text-align:right">
                                <Button type="primary" >
                                    添加
                                </Button>
                                </Col>
                            </Row>
                        </p>
                        <Table border :columns="columns7" :data="data6"></Table>
                    </Card>
                    </Col>
                </Row>
                <Row>
                    <Col span="24">
                    <Card>
                        <p slot="title">
                            <Row>
                                <Col span="12">
                                工程师库
                                </Col>
                                <Col span="12" style="text-align:right">
                                <Button type="primary" @click="modalAddEngineer = true">
                                    添加
                                </Button>
                                <Button type="error">
                                    删除
                                </Button>
                                </Col>
                            </Row>
                        </p>
                        <Table border :columns="columns1" :data="data1"></Table>
                    </Card>
                    </Col>
                </Row>
                <div style="margin: 10px;overflow: hidden">
                    <div style="float: right;">
                        <Page :total="100" :current="1"></Page>
                    </div>
                </div>
            </TabPane>
            <TabPane label="安全设置" name="name2">
                <Card :bordered="false">
                    <p slot="title">密码修改</p>
                    <Row>
                        <Col span="12" offset="1">
                        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
                            <p class="title">
                                登录账户　　18723355112
                            </p>
                            <br>
                            <br>
                            <FormItem label="输入原密码" prop="name">
                                <Input v-model="formValidate.name" placeholder=""></Input>
                            </FormItem>
                            <FormItem label="输入新密码" prop="mail">
                                <Input v-model="formValidate.mail" placeholder=""></Input>
                            </FormItem>
                            <FormItem label="确认新密码" prop="newPassword">
                                <Input v-model="formValidate.mail" placeholder=""></Input>
                            </FormItem>
                            <FormItem>
                                <Button type="primary" @click="instance('success')">确认</Button>
                            </FormItem>
                        </Form>

                        </Col>
                    </Row>
                </Card>
            </TabPane>
            <TabPane label="绩效规则" name="name3">
                <Card>
                    <p slot="title">绩效规则</p>
                    <table width="100%" cellspacing="0" cellpadding="0" border="1">
                        <tr>
                            <th colspan="2" width="33.3%">
                                报告类型
                            </th>
                            <th width="33.3%">
                                审批部门
                            </th>
                            <th width="33.3%">
                                绩效
                            </th>
                        </tr>
                        <tr>
                            <td rowspan="12">
                                一般报告表
                            </td>

                            <td>
                                无专项
                            </td>
                            <td rowspan="4">
                                县批
                            </td>
                            <td style="">
                                <p v-if="flag" style="">{{num}}
                                    <Icon style="" type="md-create" @click='edit()' />
                                </p>
                                <div v-else>
                                    <input type="text" v-model="num" @change='input()'>
                                    <Icon type="md-checkmark" @click='save()' />
                                </div>

                            </td>
                        </tr>
                        <tr>
                            <td>
                                1个专项
                            </td>
                            <td style="">
                                <p v-if="flag" style="">{{num}}
                                    <Icon style="" type="md-create" @click='edit()' />
                                </p>
                                <div v-else>
                                    <input type="text" v-model="num" @change='input()'>
                                    <Icon type="md-checkmark" @click='save()' />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                2个专项
                            </td>
                            <td style="">
                                <p v-if="flag" style="">{{num}}
                                    <Icon style="" type="md-create" @click='edit()' />
                                </p>
                                <div v-else>
                                    <input type="text" v-model="num" @change='input()'>
                                    <Icon type="md-checkmark" @click='save()' />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                3个专项
                            </td>
                            <td style="">
                                <p v-if="flag" style="">{{num}}
                                    <Icon style="" type="md-create" @click='edit()' />
                                </p>
                                <div v-else>
                                    <input type="text" v-model="num" @change='input()'>
                                    <Icon type="md-checkmark" @click='save()' />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                无专项
                            </td>
                            <td rowspan="4">
                                市批
                            </td>
                            <td style="">
                                <p v-if="flag" style="">{{num}}
                                    <Icon style="" type="md-create" @click='edit()' />
                                </p>
                                <div v-else>
                                    <input type="text" v-model="num" @change='input()'>
                                    <Icon type="md-checkmark" @click='save()' />
                                </div>

                            </td>
                        </tr>
                        <tr>
                            <td>
                                1个专项
                            </td>
                            <td style="">
                                <p v-if="flag" style="">{{num}}
                                    <Icon style="" type="md-create" @click='edit()' />
                                </p>
                                <div v-else>
                                    <input type="text" v-model="num" @change='input()'>
                                    <Icon type="md-checkmark" @click='save()' />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                2个专项
                            </td>
                            <td style="">
                                <p v-if="flag" style="">{{num}}
                                    <Icon style="" type="md-create" @click='edit()' />
                                </p>
                                <div v-else>
                                    <input type="text" v-model="num" @change='input()'>
                                    <Icon type="md-checkmark" @click='save()' />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                3个专项
                            </td>
                            <td style="">
                                <p v-if="flag" style="">{{num}}
                                    <Icon style="" type="md-create" @click='edit()' />
                                </p>
                                <div v-else>
                                    <input type="text" v-model="num" @change='input()'>
                                    <Icon type="md-checkmark" @click='save()' />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                无专项
                            </td>
                            <td rowspan="4">
                                省批
                            </td>
                            <td style="">
                                <p v-if="flag" style="">{{num}}
                                    <Icon style="" type="md-create" @click='edit()' />
                                </p>
                                <div v-else>
                                    <input type="text" v-model="num" @change='input()'>
                                    <Icon type="md-checkmark" @click='save()' />
                                </div>

                            </td>
                        </tr>
                        <tr>
                            <td>
                                1个专项
                            </td>
                            <td style="">
                                <p v-if="flag" style="">{{num}}
                                    <Icon style="" type="md-create" @click='edit()' />
                                </p>
                                <div v-else>
                                    <input type="text" v-model="num" @change='input()'>
                                    <Icon type="md-checkmark" @click='save()' />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                2个专项
                            </td>
                            <td style="">
                                <p v-if="flag" style="">{{num}}
                                    <Icon style="" type="md-create" @click='edit()' />
                                </p>
                                <div v-else>
                                    <input type="text" v-model="num" @change='input()'>
                                    <Icon type="md-checkmark" @click='save()' />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                3个专项
                            </td>
                            <td style="">
                                <p v-if="flag" style="">{{num}}
                                    <Icon style="" type="md-create" @click='edit()' />
                                </p>
                                <div v-else>
                                    <input type="text" v-model="num" @change='input()'>
                                    <Icon type="md-checkmark" @click='save()' />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td rowspan="4">
                                核与辐射报告表
                            </td>
                            <td>
                                无专项
                            </td>
                            <td rowspan="2">
                                市批
                            </td>
                            <td>
                                <p v-if="flag" style="">{{num}}
                                    <Icon style="" type="md-create" @click='edit()' />
                                </p>
                                <div v-else>
                                    <input type="text" v-model="num" @change='input()'>
                                    <Icon type="md-checkmark" @click='save()' />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                1个专项
                            </td>
                            <td>
                                <p v-if="flag" style="">{{num}}
                                    <Icon style="" type="md-create" @click='edit()' />
                                </p>
                                <div v-else>
                                    <input type="text" v-model="num" @change='input()'>
                                    <Icon type="md-checkmark" @click='save()' />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                无专项
                            </td>
                            <td rowspan="2">
                                省批
                            </td>
                            <td>
                                <p v-if="flag" style="">{{num}}
                                    <Icon style="" type="md-create" @click='edit()' />
                                </p>
                                <div v-else>
                                    <input type="text" v-model="num" @change='input()'>
                                    <Icon type="md-checkmark" @click='save()' />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                1个专项
                            </td>
                            <td>
                                <p v-if="flag" style="">{{num}}
                                    <Icon style="" type="md-create" @click='edit()' />
                                </p>
                                <div v-else>
                                    <input type="text" v-model="num" @change='input()'>
                                    <Icon type="md-checkmark" @click='save()' />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td rowspan="3" colspan="2">
                                报告书
                            </td>
                            <td>
                                县批
                            </td>
                            <td>
                                <p v-if="flag" style="">{{num}}
                                    <Icon style="" type="md-create" @click='edit()' />
                                </p>
                                <div v-else>
                                    <input type="text" v-model="num" @change='input()'>
                                    <Icon type="md-checkmark" @click='save()' />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                市批
                            </td>
                            <td>
                                <p v-if="flag" style="">{{num}}
                                    <Icon style="" type="md-create" @click='edit()' />
                                </p>
                                <div v-else>
                                    <input type="text" v-model="num" @change='input()'>
                                    <Icon type="md-checkmark" @click='save()' />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                省批
                            </td>
                            <td>
                                <p v-if="flag" style="">{{num}}
                                    <Icon style="" type="md-create" @click='edit()' />
                                </p>
                                <div v-else>
                                    <input type="text" v-model="num" @change='input()'>
                                    <Icon type="md-checkmark" @click='save()' />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                规划
                            </td>
                            <td>
                                /
                            </td>
                            <td>
                                2000
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                验收报告
                            </td>
                            <td>
                                /
                            </td>
                            <td>
                                2000
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                后评价
                            </td>
                            <td>
                                /
                            </td>
                            <td>
                                2000
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                跟踪评价
                            </td>
                            <td>
                                /
                            </td>
                            <td>
                                2000
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                现状评估报告
                            </td>
                            <td>
                                /
                            </td>
                            <td>

                            </td>
                        </tr>
                    </table>
                </Card>
            </TabPane>
        </Tabs>
        <!-- 添加工程师 -->
        <Modal v-model="modalAddEngineer" title="添加工程师" >
            <Table border :columns="columnsEngineer" :data="dataEngineer"></Table>
        </Modal>
    </div>
</template>

<script type="text/javascript">
    export default {
        data() {
            return {
                modalAddEngineer: false,
                columnsEngineer: [{
                        title: '姓名',
                        key: 'name'
                    },
                    {
                        title: '性别',
                        key: 'sex'
                    },
                    {
                        title: '职位',
                        key: 'joj'
                    },
                    {
                        title: '公司级别',
                        key: 'rank'
                    },
                    {
                        title: '所属部门',
                        key: 'section'
                    },
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                ],
                dataEngineer:[
                    {
                        name:"张三",
                        sex:"女",
                        job:"工程师",
                        rank:"总公司",
                        section:"总工办"
                    },
                    {
                        name:"张三",
                        sex:"女",
                        job:"工程师",
                        rank:"总公司",
                        section:"总工办"
                    },
                    {
                        name:"张三",
                        sex:"女",
                        job:"工程师",
                        rank:"总公司",
                        section:"总工办"
                    },
                    {
                        name:"张三",
                        sex:"女",
                        job:"工程师",
                        rank:"总公司",
                        section:"总工办"
                    },
                ],
                columns1: [{
                        align: "center",
                        title: "序号",
                        key: "num",
                        width: 100
                    },
                    {
                        align: "center",
                        title: "姓名",
                        key: "name",
                    },
                    {
                        align: "center",
                        title: "登记证号",
                        key: "djzh",
                    },
                    {
                        align: "center",
                        title: "登记类别",
                        key: "djlb",
                    },
                    {
                        align: "center",
                        title: "现有项目数量",
                        key: "xysl",
                    },
                    {
                        align: "center",
                        title: "登记有效期",
                        key: "djyxq",
                    },
                    {
                        align: "center",
                        title: "审核权限",
                        key: "shqx",
                        render: (h, params) => {
                            return h('div', [
                                h('Select', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                })
                            ]);
                        }
                    },
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                ],
                data1: [{
                        num: 1,
                        name: "某某某",
                        djzh: "B111602203",
                        djlb: "社会服务",
                        xysl: "4书  2表",
                        djyxq: "2021-02-10"
                    },
                    {
                        num: 2,
                        name: "某某某",
                        djzh: "B111602203",
                        djlb: "家庭服务",
                        xysl: "4书  2表",
                        djyxq: "2021-02-10"
                    }, {
                        num: 3
                    }, {
                        num: 4
                    }
                ],
                columns7: [{
                        align: "center",
                        title: '公司级别',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Select', {

                                }),
                            ]);
                        }
                    },
                    {
                        align: "center",
                        title: '环评项目审核级数',
                        key: 'age',
                        render: (h, params) => {
                            return h('div', [
                                h('Select', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    },

                    {
                        align: "center",
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data6: [{
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park'
                    }
                ],
                phone: 'apple',
                flag: true,
                num: "",
                formValidate: {
                    name: "",
                    mail: "",
                    newPassword: ""
                },
                ruleValidate: {
                    name: [{
                        required: true,
                        message: "The name cannot be empty",
                        trigger: "blur"
                    }],
                    mail: [{
                        required: true,
                        message: "Mailbox cannot be empty",
                        trigger: "blur"
                    }],
                    newPassword: [{
                        required: true,
                        message: "Mailbox cannot be empty",
                        trigger: "blur"
                    }]
                }
            };
        },
        methods: {
            instance(type) {
                const title = "密码修改成功，请重新登录";
                const content = "<p>3s后将自动退出</p>";
                this.$Modal.success({
                    title: title,
                    content: content
                });
            },
            edit() {
                this.flag = false;
            },
            input() {
                this.flag = true;
            },
            save() {
                this.flag = true;
            }
        }
    };
</script>

<style scoped>

</style>